<template>
    <div class="softMenu" v-show="showMask">
        <div class="softMenu-container" :style="{width: width, height: height}">
        	<div class="softMenu_top">
				<h2 class="yigou" :class="{'checkd':currentClass}" @click="changePurchased">已购科目</h2>
				<h2 class="qiehuan":class="{'checkd':!currentClass}" @click="changeMemu">切换科目</h2>
				<div class="search_div" v-show="!currentClass">
					<input type="text" placeholder="请输入科目名称" id="search_input1" ref="search_input"  @keyup.enter="searchMenu(searchDataBefore)"/>
					<img src="../../../images/softmenu/serchexam.png" alt=""  class="search_btn" @click="searchMenu(searchDataBefore)"/>
				</div>
			</div>
			<!--已购科目-->
			<div v-show="ispurchase" style="height: 478px;">
				<div class="noVip" v-show="!vipDataList">
					<p>您还没有开通任何班次</p>
					<div class="goBuy">去开通</div>
				</div>
				<ul class="purchased" id="purchased" v-show="vipDataList">
					<li class="isvipKM" v-for="(item,index) in vipDataList" >
						<div class="isvipKM_lef" appName="" appEName="" appID="" appVn ="" appVnName=""  @click="goIN(item)">
							<p class="isvip_name">{{item.CName}} - {{ item.AppVnName}}</p>
							<p class="endtime">有效期至{{item.EndTime | formatDate}}</p>
						</div>
						<div class="renewBtn" id="renewBtn" v-if="new Date()>new Date(item.EndTime)">续费</div>
					</li>
				</ul>
			</div>
			<!--职业类别-->
			<ul class="category" v-show="categoryflag">
				<li v-for="(item,index) in KemuData" ksbID="item.KsbClassID" @click="getExamination(item.KsbClassID,index)">
					<div class="xiaoR lfsub"></div><p>{{ item.KsbClassName}}</p>
				</li>
			</ul>
			
			<p class="backMain" @click="gobackFirst" v-show="backFlag">&lt;&nbsp;返回职业类别</p>
			<!--剩余层级科目列表-->
			<div class="kemuList" id="kemuList" v-show="kemuListFlag">
				<ul class="kemuList_lef" v-show="">
					<li class="subname second" :class="{'ischeck':index === isactive}" v-for="(item,index) in secondData"  @click="getSubject(item.KsbClassID,index)">{{item.KsbClassName}}</li>
				</ul>
				<ul class="GP_toponym" id="GP_toponym" v-show="middlelevelFlag">
					<li v-for="(item,index) in middlelevel" :class="{'ischeck':index === middleIsactive}" @click="getSubject(item.KsbClassID,isactive,index)">{{item.KsbClassName}} </li>
				</ul>
				<ul class="kemuList_rig">
					<li v-for="(item,index) in lastlevel" @click="goIN(item)">{{item.Name}}</li>
				</ul>
			</div>
			<!--搜索展示-->
			<div  v-if="searchFlag">
				<ul class="seachdiv" v-if="serachData.length">
					<li v-for="(item,index) in serachData"  @click="goIN(item)" v-html="showDate(item.Name)"></li>
				</ul>
				<p class="noFind1" v-if="serachData.length===0">没有找到相应科目</p>
			</div>
            <div class="close-btn" @click="closeMask"><img src="../../../images/softmenu/close.png"/></div>
        </div>
    </div>
</template>
<script>
import { datetimeFormat,setSelectedApp } from '../../../config/mUtils'
import {getOccupational,getsubjectLast} from "../../../config/getData"
import {getVipAppData,upSubject} from "../../../config/yingPrg"
export default {
    inject:['reload'],
    props: {
        value: {},
        // 类型包括 defalut 默认， danger 危险， confirm 确认，
        type:{
            type: String,
            default: 'default'
        },
        content: {
            type: String,
            default: ''
        },
        title: {
            type: String,
            default: ''
        },
        width:{
        	type: String,
            default: '852px'
        },
        height:{
        	type: String,
            default: '552px'
        }
    },
    data(){
        return{
            showMask: true,
            totalMenu:'',//全部科目信息
            KemuData:'',//科目第一层
            categoryflag: false,
            secondData:'',//第二层数据
            secondFlag:false,
            isactive:0,// 左侧样式
            lastlevel :'',//科目列表数据 
            middlelevel:'',//住院医师和药学职称考试中间层数据
            middlelevelFlag:false,//住院医师和药学职称考试中间层数据是否显示
            middleIsactive:0,
            backFlag:false,//返回按钮是否显示
            kemuListFlag: false,//具体科目列表显示
            vipDataList:'',
            ispurchase:true,
            currentClass:true,
            serachData:'',
            searchDataBefore:'',
            searchFlag:false,// 搜索标记
        }
    },
    filters:{
        formatDate(time){
            let date = new Date(time);
            return datetimeFormat(date,'yyyy-MM-dd');
        }
    },
    methods:{
        closeMask(){
            this.showMask = false;
            this.$emit('closeSwitch');
        },
        closeBtn(){
            this.$emit('cancel');
            this.closeMask();
        },
        dangerBtn(){
            this.$emit('danger');
            this.closeMask();
        },
        confirmBtn(){
            this.$emit('confirm');
            this.closeMask();
        },
        changePurchased(){
        	this.categoryflag = false ;
        	this.ispurchase = true;
			this.backFlag = false ;
			this.kemuListFlag = false ;
			this.currentClass = true;
//			$('.search_div').hide();
//			$('.search_div1').hide();
			$(this).addClass('checkd').siblings().removeClass('checkd');
        },
        changeMemu(){
        	this.categoryflag = true ;
        	this.ispurchase = false;
			this.backFlag = false ;
			this.kemuListFlag = false ;
			$('.kemuList').hide();
			this.currentClass = false;
//			$('.search_div').hide();
//			$('.search_div1').show();
//			$('.noVip').hide();
//			$('.search_div1').show();
			$(this).addClass('checkd').siblings().removeClass('checkd');
        },
        getExamination(ksbid,index){
        	this.categoryflag = false ;
        	this.middlelevelFlag = false ;
        	this.backFlag = true;
        	this.kemuListFlag = true ;
        	if(this.KemuData[index].Childs){
				this.secondData = this.KemuData[index].Childs;
				this.secondFlag = true ;
				this.getSubject(this.secondData[0].KsbClassID,0);
				$('.kemuList_lef').show();
				$('.kemuList_rig').css('width','60%');
			}else{
				this.getSubject(ksbid);
			}
       	},
       	getSubject(KsbClassID,index,index2){
       		if(!(index || index === 0)){
       			$('.kemuList_rig').css('width','100%');
				$('.kemuList_lef').hide();
       		}else if(index2 || index2 === 0){
       			this.middleIsactive = index2;
       			this.middlelevelFlag = true ;
       		}else{
       			this.isactive = index;
       			this.middlelevelFlag = false ;
       			$('.kemuList_lef').css('width','40%');
				$('.kemuList_rig').css('width','60%');
       		}
       		if(index && this.secondData[index].Childs && !(index2 || index2 === 0)){
       			this.middlelevelFlag = true ;
       			this.middlelevel = this.secondData[index].Childs;
       			$('.kemuList_lef').css('width','37%');
				$('.kemuList_rig').css('width','37%');
				this.getSubject(this.middlelevel[0].KsbClassID,index,0);
       		}else{
       			getsubjectLast(KsbClassID).then(res=>{
	       			if(res.status=== 200){
	       				this.lastlevel = res.data ;
	       				this.searchDataBefore = res.data ;
	       			}
	       		})
       		}
       	},
       	gobackFirst(){
       		this.backFlag = false ;
       		this.categoryflag = true;
       		this.kemuListFlag = false ;
       		this.searchFlag = false;
       		this.$refs.search_input.value = '';
       		this.searchDataBefore = this.totalMenu;
       	},
       	searchMenu(data){
       		let _that = this;
       		let keword = _that.$refs.search_input.value;
       		let arr = [];
       		if(!keword){
//     			_that.$vux.throw.show({ text: '试题列表为空！' });
       			 _that.$vux.alert.show({
                    content: '请输入您想要的内容！',
                    title: '温馨提示',
                    onHide() {
                    	
                    }
                 });
                 if(this.serachData){
                 	return;
                 }
       		}
       		if(!data){
       			return;
       		}
       		for(let i = 0;i< data.length ; i++ ){
       			if (data[i].Name.indexOf(keword) !== -1){
       				arr.push(data[i]);
       			}
       		}
       		this.searchFlag = true;
       		this.backFlag = true ;
       		this.categoryflag = false;
       		this.kemuListFlag = false ;
       		this.serachData = arr ;
       	},
       	showDate(val) {	// 筛选变色
       		let _that = this;
       		let keword = _that.$refs.search_input.value;
			val = val + '';
			if (val.indexOf(keword) !== -1 && keword !== '') {
				return val.replace(keword, '<em style="font-style: normal; color:#3d93de">' + keword + '</em>')
				
			} else {
				return val
			}
			
		},
       	goIN(data,buy){
            let _that = this;
            let _appName = data.Name;
            let _appEName = data.AppEName;
            data.AppID = data.AppID;
            let _appVn = '';
       		if(buy){
       			_appName = data.Name;
	       		_appEName = data.AppEName;
                data.AppID = data.AppID;
	       		_appVn = '';
       		}
            upSubject(data).then(res=>{
                console.log(_that);
                if(this.$route.path === '/mainIndex'){
                    this.reload();
                }else{

                }
                _that.$router.push('/mainIndex?fromUrl='+this.$route.path);
            })

            // getAppsubject(_appID,_guid,1).then(res =>{
            //     console.log(res
            //
            //     )
            // })
       	}
    },
    mounted(){
//  	console.log(this.showMask)
//      this.showMask = this.value;
    },
    watch:{
//      value(newVal, oldVal){
//          this.showMask = newVal;
//      },
//      showMask(val) {
//          this.$emit('input', val);
//      }
    },
    created:function(){
    	let _that = this;
    	getsubjectLast(-1).then(res=>{
    		if(res.status === 200){
    			this.totalMenu = res.data;
    			this.searchDataBefore = res.data;
    		}
    	})
    	getOccupational().then(res=>{
    		if(res.status === 200){
    			this.KemuData = res.data;
    		}
    	})
    	getVipAppData().then(res=>{
    		if(res){
    			this.vipDataList = JSON.parse(res);
//  			this.closeMask();
    		}else{
    			
    		}
    	})
    }
}
</script>
<style lang="less" scoped>
	@import "./switch.less";
    .softMenu{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 99;
        .softMenu-container{
            /*width: 500px;
            height: 380px;*/
            background: #ffffff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 8px;
            position: relative;
            .content{
                color: #797979;
                line-height: 26px;
                padding: 0 20px;
                box-sizing: border-box;
            }
            .btns{
                width: 100%;
                height: 60px;
                // line-height: 60px;
                position: absolute;
                bottom: 0;
                left: 0;
                text-align: right;
                padding: 0 16px;
                box-sizing: border-box;
                & > div{
                    display: inline-block;
                    height: 40px;
                    line-height: 40px;
                    padding: 0 14px;
                    color: #ffffff;
                    background: #f1f1f1;
                    border-radius: 8px;
                    margin-right: 12px;
                    cursor: pointer;
                }
            }
            .close-btn{
                position: absolute;
                top: 5px;
                right: 6px;
                width: 20px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                font-size: 18px;
                cursor: pointer;
                &:hover{
                    font-weight: 600;
                }
            }
        }
    }
</style>
